<template>
	<view>
		<div class="uni-page-head binkhead">
			<div style="width: 62rpx; height: 62rpx;margin:0 4rpx;display: flex;justify-content: center;align-items: center;">
				<i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 54rpx;" @click="goback()"></i>
			</div>
			<div style = "display: flex;justify-content: flex-start;align-items: center;width: 100%;padding: 0 10%;">
			<div v-for="(item,index) in title1" :key = "index" style = "text-align: center;width: 33%;" @click = "changeclass1(index)">
				<div style = "margin-bottom: 20rpx;color: rgba(80, 80, 80, 1);font-size: 32rpx;font-weight: bold;
">{{item.title}}</div>
				<div :class = "{color : item.bottom}" style = "width: 66rpx;height: 8rpx;margin: 0rpx auto;"></div>
			</div>
			</div>
		</div>
		<myescort1 v-if="escort == 0"></myescort1>
		<myescort2 v-if="escort == 1"></myescort2>
		<myescort3 v-if="escort == 2"></myescort3>
	</view>
</template>

<script>
	import myescort1 from './myescort1.vue';
	import myescort2 from './myescort2.vue';
	import myescort3 from './myescort3.vue';
export default {
	components: {
		myescort1,
		myescort2,
		myescort3
	},
	data() {
		return {
			escort : 0,
			title1:[
					{
						title:'陪护服务',
						bottom: true,
						class : 0
					},
					{
						title:'陪诊服务',
						bottom: false,
						class : 1
					},
					{
						title:'殡葬服务',
						bottom: false,
						class : 2
					}
				],
		};
	},
	created() {
		this.changeclass1(0);
	},
	methods: {
		changeclass1(index){
			this.escort = index;
			// if(index == 0){
			// 	this.escort1 = true;
			// 	this.escort2 = false;
			// 	this.escort3 = false
			// }else if(index == 1){
			// 	this.escort2 = true;
			// 	this.escort1 = false;
			// 	this.escort3 = false
			// }else if(index == 2){
			// 	this.escort3 = true;
			// 	this.escort1 = false;
			// 	this.escort2 = false
			// }
			this.title1.forEach((item) => {
				item.bottom = false;
			})
			this.title1[index].bottom = true;
		},
		goback(){
			this.$router.go(-1);
		}
	}
};
</script>

<style scoped>
.binkhead {
	padding: 14rpx 6rpx;
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.binkhead span {
	font-weight: 700;
	font-size: 34rpx;
}
.color {
	background-color: rgba(65, 171, 133, 1);
}
</style>
